<template>
  <div>
    <!-- 头部 -->
    <userTitel :title="title"></userTitel>
    <!-- 内容 -->
    <div class="card">
      <!-- 左 -->
      <el-card class="card-left" shadow="never">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
        ></el-tree>
      </el-card>

      <!-- 右 -->
      <div class="card-right">
        <el-card class="cardRight" shadow="never">
          <!-- 右上 -->
          <div slot="header" class="clearfix">
            <h4>机构信息</h4>
          </div>
          <div class="content">
            <el-form :inline="true" :model="formData">
              <!-- 第一行 -->
              <el-form-item prop="id" class="item" label="机构编号">
                <el-input
                  v-model="formData.id"
                  disabled
                  class="input"
                ></el-input>
              </el-form-item>
              <el-form-item prop="name" class="item" label="机构名称">
                <el-input
                  v-model="formData.name"
                  disabled
                  class="input"
                ></el-input>
              </el-form-item>
              <el-form-item class="item" label="机构类型">
                <el-select
                  v-model="formData.type"
                  style="width: 346px"
                  disabled
                >
                  <el-option
                    :value="formData.id"
                    :label="formData.type"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 第二行 -->
              <el-form-item
                style="margin-left: 30px"
                label="机构地址"
                class="select"
              >
                <!-- 省 -->
                <el-select
                  style="width: 417px; margin-left: 5px"
                  placeholder="请选择省"
                  v-model="formData.province.name"
                  @change="valueChange"
                  prefix="123"
                >
                  <el-option
                    v-for="item in formTwo"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <!-- 市 -->
                <el-select
                  style="width: 417px; margin-left: 5px"
                  v-model="formData.city.name"
                  placeholder="请选择市"
                  @change="valueChangeTwo"
                >
                  <el-option
                    v-for="item in formTree"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <!-- 县/区 -->
                <el-select
                  style="width: 417px; margin-left: 5px"
                  v-model="formData.county.name"
                  placeholder="请选择区/县"
                  @change="valueChange"
                >
                  <el-option
                    v-for="item in formFour"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- 第三行 -->
              <el-form-item class="itemTree" label="详细地址">
                <el-input
                  v-model="formData.address"
                  disabled
                  class="input"
                ></el-input>
              </el-form-item>
              <el-form-item
                style="margin-left: 65px"
                class="itemTree"
                label="经度"
              >
                <el-input
                  v-model="formData.longitude"
                  style="width: 346px"
                  disabled
                  placeholder="活动区域"
                >
                  <template slot="suffix">
                    <span style="color: #333; margin-right: 10px">E</span>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item
                style="margin-left: 63px"
                class="itemTree"
                label="纬度"
              >
                <el-input
                  v-model="formData.latitude"
                  style="width: 346px"
                  disabled
                  placeholder="活动区域"
                >
                  <template slot="suffix">
                    <span style="color: #333; margin-right: 10px">N</span>
                  </template>
                </el-input>
              </el-form-item>
              <!-- 第四行 -->
              <el-form-item
                style="margin-left: 21px"
                class="itemTree"
                label="机构负责人"
              >
                <el-input
                  v-model="formData.managerName"
                  disabled
                  class="input"
                ></el-input>
              </el-form-item>
              <el-form-item
                style="margin-left: 37px"
                class="itemTree"
                label="机构电话"
              >
                <el-input
                  v-model="formData.phone"
                  disabled
                  class="input"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button class="btn">编辑</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
        <!-- 右下 -->
        <el-card shadow="never">
          <div slot="header" class="clearfix">
            <h4>员工信息</h4>
          </div>
          <!-- 表格 -->
          <el-table
            :data="userList"
            stripe
            style="width: 100%; border: 1px solid #ebeef5"
          >
            <el-table-column type="index" prop="date" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="userId" label="员工编号" width="240">
            </el-table-column>
            <el-table-column prop="name" label="员工姓名" width="160">
            </el-table-column>
            <el-table-column prop="mobile" label="手机号"> </el-table-column>
            <el-table-column prop="agency.name" label="所属机构" width="220">
            </el-table-column>
            <el-table-column prop="account" label="系统账户"> </el-table-column>
            <el-table-column prop="roleNames" label="系统角色">
            </el-table-column>
            <el-table-column prop="status" label="账号状态" width="100">
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <div class="block" style="margin-top: 20px">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="+total"
            >
            </el-pagination>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getLogistics,
  getMechanismDetailed,
  getTwoDetailed,
  getUserList,
} from "@/api/organization-manage";

const obj = {
  1: "一级转运中心",
  2: "二级转运中心",
  3: "营业部",
};
export default {
  name: "organization-manage",
  data() {
    return {
      disabled: true,
      title: "机构管理",
      filterText: "",
      data: [], //获取数据渲染列表
      // 指定一级展示
      defaultProps: {
        id: "id",
        label: "name",
        children: "children",
      },
      // 右回显
      formData: {
        address: "", // 详细地址
        city: { name: "" }, //城市
        county: { name: "" }, // 县/区
        id: "",
        latitude: "", //纬度
        longitude: "", //经度
        managerName: "", //机构负责人
        name: "", //机构名称
        province: { name: "", id: "" }, //省
        type: "",
      }, //一级
      formTwo: {}, //省
      formTree: {}, //市
      formFour: {}, //县/区
      // -----
      // 右下
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      // 员工列表渲染
      userList: [
        {
          userId: "", //编号
          name: "", //名称
          mobile: "", // 手机号
          agency: { name: "" }, //所属机构
          account: "", //系统账户
          roleNames: [0], //系统角色
          status: 0, //账号状态
        },
      ],
      getUserListPage: {
        page: 1, //当前页
        pageSize: 5, //页面尺寸
      },
      // 总页
      total: 0,
    };
  },

  created() {
    this.getWuLiu();
    // 获取员工详情列表
    // this.getUserInfo();
  },

  methods: {
    async getWuLiu() {
      // 渲染树形图
      const res = await getLogistics();
      this.data = JSON.parse(res.data);
      // console.log(this.data);
    },
    // 详情
    async handleNodeClick(data) {
      // console.log(data);//当前选择的内容
      // 一级接口 赋值回显
      const res = await getMechanismDetailed(data.id);
      this.formData = res.data;
      for (const key in obj) {
        if (this.formData.type == key) {
          this.formData.type = obj[key];
        }
      }
      console.log(this.formData);

      // 获取二级省接口选择器
      const resTwo = await getTwoDetailed();
      this.formTwo = resTwo.data;
      console.log(this.formTwo);

      // 获取市
      const resTree = await getTwoDetailed({
        parentId: this.formData.province.id,
      });
      this.formTree = resTree.data;
      // console.log(resTree.data);

      // console.log(this.formData.county.id);
      // 获取县/区
      const resfour = await getTwoDetailed({
        parentId: this.formData.county.id,
      });
      this.formFour = resfour.data;
      // console.log(resfour.data);

      this.getUserInfo();
    },
    // 输入框的值
    // 根据省获取市
    async valueChange(id) {
      // 输入框的值发生改变使获取选中的id
      // 获取市接口选择器
      // 获取市
      const resTree = await getTwoDetailed({
        parentId: id,
      });
      this.formTree = resTree.data;
      console.log(this.formTree);
    },
    // 根据市获取区
    async valueChangeTwo(id) {
      const resfour = await getTwoDetailed({
        parentId: id,
      });
      this.formFour = resfour.data;
    },
    // 获取员工详情
    async getUserInfo() {
      console.log(this.formData);
      const res = await getUserList({
        agencyId: this.formData.id,
        page: this.getUserListPage.page, //当前页
        pageSize: this.getUserListPage.pageSize, //页面尺寸
      });
      console.log(res.data);
      this.userList = res.data.items;
      // 总条数
      this.total = res.data.counts;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getUserListPage.pageSize = val;
      this.getUserInfo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getUserListPage.page = val;
      this.getUserInfo();
    },
  },
};
</script>

<style scoped lang="scss">
// // 高亮
// .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node_content {
//   background-color: #e8e6de;
//   // background-color: #fof7ff;
//   color: #ff7a63 !important;
// }
::v-deep .el-table th.el-table__cell > .cell {
  margin-top: -130px;
}
::v-deep .el-table__header-wrapper {
  background-color: #f8faff;
  height: 51px;
}
.cardRight {
  height: 450px;
  margin-bottom: 20px;
}
.btn {
  background-color: #e15536;
  color: #fff;
  border: #e15536;
  width: 89px;
  height: 36px;
  margin: 0 auto;
  margin-top: -20px;
  margin-left: -540px;
}
.itemTree {
  margin-top: -115px;
}
.select {
  margin-top: -115px;
}
::v-deep .el-form--inline .el-form-item__label {
  float: left !important;
}
.el-form-item {
  float: left;
  font-weight: 1000;
  margin-left: 35px;
}
.input {
  width: 346px;
}
.card {
  display: flex;
  .card-left {
    width: 214px;
    height: 700px;
    margin-right: 20px;
  }
  .card-right {
    width: 80vw;
    .clearfix {
      height: 45px;
      background-color: #fafafa;
      border-bottom: 1px solid #ebeef5;
      padding-top: 10px;
      h4 {
        height: 45px;
        margin-top: -61px;
        float: left;
        margin-left: 10px;
      }
    }
    .content {
      background-color: #fff;
    }
  }
}
::v-deep .el-card__header {
  padding: 0;
}
</style>
